<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>签约申请</title>
	<meta http-equiv="Content-type" content="textml; charset=utf-8" />
	<meta content="telephone=no" name="format-detection" />
	<meta name="x5-orientation" content="portrait">
	<meta name="screen-orientation" content="portrait">
	<meta name="viewport"
		content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=yes">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="//img.ejiayou.com/activity/pages/ejiayoupay/ejiayou/css/reset.css" />
	<link rel="stylesheet" href="../css/index.css" />
	<!--  <link rel="stylesheet" type="text/css" href="css/index_style.css"/>-->
	<style type="text/css">
		html {
			font-size: 16px;
			background: #F7F8FA;
		}

		body {
			margin: 0;
			padding: 0;
		}

		.form {
			margin-top: 15px;
		}

		.btn-warp {
			display: flex;
			justify-content: center;
			margin: 30px 16px 0 16px;
		}

		.cancel-btn {
			width: 10.37rem;
			height: 3.12rem;
			font-size: 18px;
			font-weight: 600;
			color: #666666;
			background: #FFFFFF;
			border-radius: 6px;
			border: 1px solid #E9E9E9;
		}

		.submit-btn {
			width: 10.37rem;
			height: 1.56rem;
			font-size: 18px;
			font-weight: 600;
			color: #FFFFFF;
			background: linear-gradient(318deg, #FF9100 0%, #FFA400 100%);
			border-radius: 6px;
			border: none;
		}

		.imgInfo {
			width: 100%;
			height: 3.38rem;
			background: #FFFFFF;
			display: flex;
			align-items: center;
		}

		.imgInfo_title {
			width: 3.2rem;
			height: 100%;
			font-size: 0.44rem;
			font-weight: 400;
			color: #333333;
			line-height: 0.56rem;
			box-sizing: border-box;
			padding-left: 0.5rem;
			padding-top: 0.44rem;
		}

		.imgInfo_img {
			height: 100%;
			display: flex;
			align-items: center;
		}

		.imgInfo_img img {
			width: 2.63rem;
			height: 2.63rem;
			display: block;
			margin-right: 0.38rem;
			object-fit: cover;
		}

		.mask {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			background-color: rgba(0, 0, 0, .7);
			z-index: 99;
		}

		.mask_msg {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 8.75rem;
			height: 2.19rem;
			background: #FFFFFF;
			border-radius: 0.25rem;
			font-size: 0.5rem;
			text-align: center;
			line-height: 2.19rem;
		}

		.big_pic {
			height: 100%;
			display: flex;
			align-items: center;
			transform: scale(1);
			transition: all ease 0.2s;
		}
	</style>
	<script type="text/javascript">
		eval(function (p, a, c, k, e, r) {
			e = function (c) {
				return c.toString(a)
			};
			if (!''.replace(/^/, String)) {
				while (c--) r[e(c)] = k[c] || e(c);
				k = [function (e) {
					return r[e]
				}];
				e = function () {
					return '\\w+'
				};
				c = 1
			};
			while (c--)
				if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
			return p
		}('(6(a,d){j b=a.i,e="3"f 5?"3":"9",c=6(){b.7.8=(2>b.4?b.4:2)/2*g+"h"};a.0&&(d.0(e,c,!1),a.0("k",c,!1))})(l,5);',
			22, 22,
			'addEventListener||750|orientationchange|clientWidth|window|function|style|fontSize|resize||||||in|64|px|documentElement|var|DOMContentLoaded|document'
				.split('|'), 0, {}))
	</script>
</head>

<body>
	<div id="app" v-cloak>
		<van-form class="form">
			<van-field readonly clickable v-model="contractPicList.station_name" label="油站名称"></van-field>
			<van-field readonly clickable v-model="contractPicList.sign_time" label="签约日期"></van-field>
			<div class="imgInfo">
				<div class="imgInfo_title">合同照片</div>
				<div class="imgInfo_img" @click="selectPic">
					<img :src="contractPicList.contractPic" />
				</div>
			</div>
			<div class="btn-warp">
				<button class="submit-btn" color="linear-gradient(to right, #FF9100, #FFA400)"
					@click="onSubmit">下一步</button>
			</div>
			<!-- 图片放大层 -->
			<div class="mask" v-show="showBigPicCover">
				<div class="big_pic" @click="reduceImage">
					<van-image fit="cover" :src="contractPicList.contractPic">
					</van-image>
				</div>
			</div>
		</van-form>
	</div>
	<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://img.ejiayou.com/activity/js/common/jquery.min.js" type="text/javascript"
		charset="utf-8"></script>
	<script src="../js/vant.min.js"></script>
	<script src="../js/utils.js" type="text/javascript" charset="utf-8"></script>
	<script src="//img.ejiayou.com/upload/2021/3/moment.min.js"></script>
	<script src="../js/upload.js" type="text/javascript" charset="utf-8"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				contractPic: [],
				contractPicList: {},
				showBigPicCover: false,
			},
			created() {
				this.getSignInfo()
			},
			mounted() {

			},
			methods: {
				getSignInfo: function () {
					var self = this
					$.ajax({
						url: '/eapi/v1/activity/work/get_sign_station_info_by_id',
						data: {
							admin_id: getQueryVariable('user_id'),
							work_order_id: getQueryVariable('work_order_id')
				
						},
						type: 'POST',
						success: function (res) {
							if (res.status == 200) {
								var resData = res.data
								self.contractPicList = JSON.parse(resData.content)
							}
						}
					})
				},
				onSubmit: function () {
					sessionStorage.setItem("sixBack", 1)
					location.href = '/pages/aurora_project/base_station/index.html?admin_id=' + getQueryVariable('user_id')
						+ '&work_order_id=' + getQueryVariable('work_order_id')
						+ '&look_gd=1&look_gd_text=1'
				},

				selectPic() {
					var isReader = window.localStorage.getItem('isReader');
					console.log('----------' + isReader)
					if (isReader == 'true') {
						this.showBigPicCover = true;
					} else {
						this.showBigPicCover = false;
					}
				},

				reduceImage() {
					this.showBigPicCover = false;
				},
			},

		})
	</script>
</body>

</html>